<template>
  <div class="form">
    <div>
      昵称：
      <input type="text" v-model="form.name" />
    </div>
    <div>
      电话：
      <input type="tel" v-model="form.tel" />
    </div>
    <div>
      密码：
      <input type="password" v-model="form.psd" />
    </div>
    <div>
      <button :disabled="isClose" @click="login">登录</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "小红",
        tel: "15071167219",
        psd: "123123",
      },
      isclose: true, //控制按钮是否禁用
    }
  },
  watch: {
    form: {
      handler() {
        // && 且操作符，只有当条件全部成立的时候才返回true，执行if语句，将按钮禁用状态改为false
        this.isClose = !(this.form.name && this.form.tel && this.form.psd)
        //或者下面的写法
        // if (this.form.name && this.form.tel && this.form.psd) {
        //   this.isClose = false
        // }
      },
      deep: true, //因为监听的是对象，需要开启深度监听
    },
  },
  methods: {
    login() {
      let telReg = /^1[3|4|5|7|8]\d{9}$/
      let psdReg = /^\d{6,}$/

      if (!telReg.test(this.form.tel)) {
        alert('手机号格式错误！')
        return //停止往下执行
      }
      if(!psdReg.test(this.form.psd)){
        alert('请输入6位数及以上的密码！')
        return //停止往下执行
      }

      //正则判断不通过不会执行下面的登录逻辑
      this.$store.commit('setUser',this.form.name)
      this.$router.push('/about')
    },
  },
}
</script>

<style lang="scss" scoped>
.form {
  margin-top: 150px;
  div {
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
    button {
      width: 48px;
    }
  }
}
</style>
